<!-- 12.7 黄金页面 -->
<template>
	<view>
		<!-- 分类视频 -->
		<view class="gold-video" v-if="detail.advert_params && detail.advert_params.video_url != ''">
			<video autoplay loop muted :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false"
				:enable-progress-gesture="false" class="video" :src="detail.advert_params.video_url"
				:controls="false"></video>
		</view>
		<!-- 分类 3*2 -->
		<view class="cate-style cross-center dir-left-wrap">
			<view class="cate-style-item" v-for="(item,index) in cat_list" :key="index"
				@click="morelist(item.id,item.name,index)">
				<image class="cate-image" :src="item.pic_url" mode=""></image>
				<view class="cate-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="" v-if="cat_list.length > 0">
			<view v-for="(item,index) in cat_list" :key="index">
				<view class="cate-title" v-if="item.childgoodlist.length > 0">
					<text>{{item.name}}</text>
				</view>
				<view class="list-one" v-if="index % 2 == 0">
					<view class="list-one-item" v-for="(child,childindex) in item.childgoodlist" :key="childindex"
						@click="routeGo(child,item.id)">
						<image class="image" :src="child.cover_pic" mode=""></image>
						<text class="u-line-2">{{child.name}}</text>
					</view>
				</view>
				<view class="list-two" v-else>
					<view class="list-two-item" v-for="(child,childindex) in item.childgoodlist" :key="childindex"
						@click="routeGo(child,item.id)">
						<image class="image" :src="child.cover_pic" mode=""></image>
						<text class="list-two-title u-line-5">{{child.name}}</text>
					</view>
				</view>
				<view class="nowmoew" @click="morelist(item.id,item.name,index)" v-if="item.childgoodlist.length>0">
					查看更多>>>
				</view>
			</view>
		</view>
		<view class="" v-else>
			<view class="cate-title">
				<text>{{detail.name}}</text>
			</view>
			<view class="list-one" v-if="goods_list.length > 0">
				<view class="list-one-item" v-for="(item,index) in goods_list" :key="index"
					@click="routeGo(item,item.id)">
					<image class="image" :src="item.cover_pic" mode=""></image>
					<text class="u-line-2">{{item.name}}</text>
				</view>
			</view>
			<view class="nowmoew" v-else>
				等待，有惊喜哦~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cat_list: [],
				page: 1,
				page_count: 1,
				cat_id: 691,
				goods_list: [],
				detail: '',
				title: '',
			}
		},
		onLoad(options) {
			this.cat_id = options.cat_id || 691
			this.requestCats(this.cat_id)
			if (this.cat_id > 0) {
				this.loadCatDetail(this.cat_id)
			}
			if (options.title) {
				this.title = options.title
				uni.setNavigationBarTitle({
					title: this.title
				})
			} else {
				uni.setNavigationBarTitle({
					title: '黄金商品'
				})
			}
		},
		onReachBottom() {
			if (this.cat_list.length == 0 && this.page < this.page_count) {
				this.page++
				this.request()
			}
		},
		methods: {
			loadCatDetail(cat_id) {
				this.$request({
					url: this.$api.default.cat_detail,
					data: {
						cat_id: cat_id
					},
				}).then(res => {
					this.detail = res.data.detail
					this.title = res.data.detail.name
					uni.setNavigationBarTitle({
						title: this.title
					})
				});
			},
			requestCats(cat_id) {
				this.$request({
					url: this.$api.default.cat_list,
					data: {
						cat_id: cat_id,
						limit: 4
					},
				}).then(res => {
					if (res.code === 0) {
						this.cat_list = res.data.list
						if (this.cat_list.length == 0) {
							this.request()
						}
					}
				});
			},
			async request() {
				const res = await this.$request({
					url: this.$api.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.cat_id,
						sort: 1,
						sort_type: 1,
						keyword: '',
						sign: '',
						is_sales: 1
					}
				});
				if (res.code === 0) {
					this.page_count = res.data.pagination.page_count;
					this.goods_list = this.goods_list.concat(res.data.list)
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
					})
				}
			},
			routeGo(e, cat_id) {
				let url = e.page_url + '&title=' + e.name + '&cat_id=' + cat_id
				if (this.cat_list.length == 0) {
					url = e.page_url + '&title=' + e.name + '&cat_id=' + this.cat_id
				}
				uni.navigateTo({
					url: url
				});
			},
			morelist(id, name, index) {
				let url = '/plugins/gold/index?cat_id=' + id + '&title=' + name + '&numid=' + index
				if (this.available) {
					url = url + '&available=true'
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gold-video {
		width: 100%;
		height: 450rpx;

		.video {
			width: 100%;
			height: 450rpx;
		}
	}

	/* 查询 */
	.beseparate {
		width: 720rpx;
		margin: 24rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.besepone {
		position: relative;
		// padding: 24rpx 24rpx 32rpx 36rpx;
		width: 350rpx;
		height: 490rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 350rpx;
			height: 490rpx;
		}
	}

	.cate-style {
		margin: 36rpx auto;

		.cate-style-item {
			width: 250rpx;
			text-align: center;

			.cate-image {
				width: 180rpx;
				height: 180rpx;
			}

			.cate-name {
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
			}
		}
	}

	.cate-title {
		// text-align: center;
		font-size: 32rpx;
		// margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: 600;
	}

	.cate-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: #f4f4f4;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-title text {
		padding: 0 10px;
		position: relative;
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.list-one-item {
			width: 350rpx;
			height: 460rpx;
			font-size: 28rpx;

			.image {
				width: 350rpx;
				height: 350rpx;
			}
		}
	}

	.list-two {
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			height: 240rpx;
			font-size: 28rpx;

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				flex: 1;
				margin-left: 36rpx;
				text-align: justify;
			}
		}
	}

	.nowmoew {
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
</style>
